<template>
  <el-container>
    <el-main class="main-select-body bgfff">
      <el-form inline>
        <el-form-item>
          <el-button type="primary" @click="dialogEdit(null)">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table
        class="marT20"
        :data="tableData"
        :height="tableHeight"
        v-loading="loading"
        @row-dblclick="dialogEdit"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column width="70" align="center" type="index" label="序号"></el-table-column>
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        ></el-table-column>
        <el-table-column :label="$t('base.table.action')" fixed="right" width="260">
          <template slot-scope="scope">
            <el-button type="text" @click="dialogEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="onDelete(scope.row)">删除</el-button>
            <el-button type="text" @click="onReleaseXiangding(scope.row)">关联想定</el-button>
            <el-button type="text" @click="onUneleaseXiangding(scope.row)">查看关联想定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="changePageSize"
        @current-change="changePageNo"
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
      ></el-pagination>
      <div class="table-bg"></div>
    </el-main>
    <el-dialog
      append-to-body
      width="600px"
      :title="title"
      :visible.sync="dialogValue"
      @close="emitClose"
    >
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="演习名称" prop="maneuverName">
          <el-input v-model="ruleForm.maneuverName" maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="演习机构" prop="orgId">
          <el-select style="width: 100%" v-model="ruleForm.orgId">
            <el-option v-for="item in orgList" :value="item.id" :label="item.name" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="演习负责人" prop="principalId">
          <el-select style="width: 100%" v-model="ruleForm.principalId">
            <el-option v-for="item in userList" :value="item.id" :label="item.name" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="演习助理">
          <el-select style="width: 100%" v-model="ruleForm.assistantIds" multiple>
            <el-option v-for="item in userList" :value="item.id" :label="item.name" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启用状态" prop="maneuverStatus">
          <el-radio-group v-model="ruleForm.maneuverStatus">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="emitClose">取 消</el-button>
        <el-button type="primary" @click="emitSave">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      append-to-body
      width="600px"
      title="关联想定"
      :visible.sync="dialogValue2"
      @close="dialogValue2 = false"
    >
      <ReleaseXiangding v-if="dialogValue2" :id="currentDetail && currentDetail.id" @close="dialogValue2 = false"></ReleaseXiangding>
    </el-dialog>
    <el-dialog
      append-to-body
      width="600px"
      title="查看关联想定"
      :visible.sync="dialogValue3"
      @close="dialogValue3 = false"
    >
      <UnReleaseXiangding v-if="dialogValue3" :id="currentDetail && currentDetail.id"></UnReleaseXiangding>
    </el-dialog>
  </el-container>
</template>
<script>
import { drillAPI as request } from "@/api";
import { getOrg, getUser } from "@/utils";
import curd from "@/mixins/curd";
import ReleaseXiangding from "./release-xiangding.vue";
import UnReleaseXiangding from "./un-release-xiangding.vue";
import { mapGetters } from "vuex";
export default {
  mixins: [curd],
  components: {
    ReleaseXiangding,
    UnReleaseXiangding,
  },
  computed: {
    ...mapGetters(["userList", "orgList"]),
  },
  data() {
    return {
      dialogText: "演习",
      request: request,
      columns: [
        { prop: "maneuverName", label: "演习科目" },
        { prop: "maneuverStatusText", label: "状态" },
        { prop: "principalName", label: "演习负责人" },
        { prop: "orgName", label: "所属机构" },
        { prop: "createTime", label: "创建时间" },
      ],
      ruleForm: {
        id: undefined,
        maneuverName: "",
        principalId: "",
        orgId: "",
        assistantIds: [],
        maneuverStatus: "1",
      },
      rules: {
        maneuverName: [{ required: true, message: "演习名称不能为空" }],
        principalId: [{ required: true, message: "演习负责人不能为空" }],
        orgId: [{ required: true, message: "演习机构不能为空" }],
        maneuverStatus: [{ required: true, message: "启用状态不能为空" }],
      },
      /**
       * 关联想定
       */
      dialogValue2: false,
      /**
       * 取消关联想定
       */
      dialogValue3: false,
    };
  },
  methods: {
    dialogEdit(item, dialogValue = true) {
      this.currentDetail = item;
      if (item) {
        this.ruleForm.id = item.id;
        this.ruleForm.maneuverName = item.maneuverName;
        this.ruleForm.principalId = item.principalId;
        this.ruleForm.orgId = item.orgId;
        this.ruleForm.assistantIds = item.assistantIds;
        this.ruleForm.maneuverStatus = item.maneuverStatus;
      } else {
        this.ruleForm = {
          id: undefined,
          maneuverName: "",
          principalId: "",
          orgId: "",
          assistantIds: [],
          maneuverStatus: "1",
        };
      }
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
      this.dialogValue = dialogValue;
    },
    formatTableData(tableData) {
      tableData.forEach((el) => {
        el.maneuverStatusText = "";
        if (el.maneuverStatus == 0) {
          el.maneuverStatusText = "禁用";
        } else if (el.maneuverStatus == 1) {
          el.maneuverStatusText = "启用";
        }
      });
    },
    // 关联想定
    onReleaseXiangding(item) {
      this.currentDetail = item;
      this.dialogValue2 = true;
    },
    emitSave2() {},
    emitClose2() {
      this.dialogValue2 = false;
    },
    //解除想定
    onUneleaseXiangding(item) {
      this.currentDetail = item;
      this.dialogValue3 = true;
    },
  },
};
</script>
